<template>
  <u-picker 
    :show="show" 
    ref="subjectPicker"
    :columns="subjectColumns" 
    @confirm="handleConfirm" 
    @cancel="handleCancel"
    @change="handleChange"
    title="选择科目"
  ></u-picker>
</template>

<script>
/**
 * 科目选择器组件
 * 支持2级联动的科目选择
 */
export default {
  name: 'SubjectPicker',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 科目数据（2级联动）
      subjectColumns: [
        ['全部', '学前', '小学', '初中', '高中', '语言', '书法'],
        ['全部科目'] // 初始只显示全部科目
      ],
      columnData: [
        ['全部科目'],
        ['学前语文', '学前数学', '学前英语', '学前美术', '学前音乐'],
        ['小学语文', '小学数学', '小学英语', '小学科学', '小学品德'],
        ['初中语文', '初中数学', '初中英语', '初中物理', '初中化学', '初中政治'],
        ['高中语文', '高中数学', '高中英语', '高中物理', '高中化学', '高中政治'],
        ['英语', '日语', '韩语', '法语', '德语', '西班牙语'],
        ['硬笔书法', '软笔书法', '毛笔字', '钢笔字']
      ]
    }
  },
  methods: {
    /**
     * 科目选择器联动处理
     * @param {Object} e 变化事件
     */
    handleChange(e) {
      console.log('科目选择器change事件:', e)
      const {
        columnIndex,
        value,
        values,
        index,
        picker = this.$refs.subjectPicker
      } = e
      
      console.log('columnIndex:', columnIndex)
      console.log('value:', value)
      console.log('values:', values)
      console.log('index:', index)
      console.log('picker:', picker)
      
      // 当第一列（教育阶段）发生变化时，更新第二列（科目）的选项
      if (columnIndex === 0) {
        console.log('第一列变化，index:', index)
        console.log('columnData[index]:', this.columnData[index])
        
        // 使用index来获取对应的第二列数据
        const subjects = this.columnData[index] || []
        console.log('对应的subjects:', subjects)
        
        // 只使用setColumnValues方法更新，不直接修改subjectColumns
        if (picker && picker.setColumnValues) {
          console.log('调用setColumnValues更新第二列')
          picker.setColumnValues(1, subjects)
          
          // 尝试保持第一列的选择状态
          setTimeout(() => {
            if (picker && picker.setIndexs) {
              console.log('保持第一列选择状态，index:', index)
              picker.setIndexs([index, 0]) // 第一列保持当前选择，第二列重置为0
            }
          }, 50)
        } else {
          console.log('picker或setColumnValues方法不存在')
        }
      }
    },

    /**
     * 确认选择
     * @param {Object} e 选择结果
     */
    handleConfirm(e) {
      console.log('科目选择结果:', e)
      console.log('e.value[0]:', e.value[0])
      console.log('e.value[1]:', e.value[1])
      
      // 向父组件发送选择结果
      this.$emit('confirm', {
        stage: e.value[0], // 教育阶段
        subject: e.value[1] || e.value[0], // 具体科目
        fullValue: e.value // 完整的选择结果
      })
    },

    /**
     * 取消选择
     */
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
// 组件样式（如果需要的话）
</style>
